﻿@page "/tooltips"
@inject IStringLocalizer<Tooltips> Localizer

<h3>@Localizer["H1"]</h3>
<h4>@Localizer["H2"]</h4>

<DemoBlock Title="@Localizer["P1"]" Introduction="@Localizer["P2"]" Name="Nomal">
    <div class="d-flex flex-column w-100 tooltip-demo">
        <div class="d-flex justify-content-center">
            <Tooltip Placement="Placement.Bottom" Title="Tootip">
                <BootstrapInput Value="@BottomString" aria-label="@BottomString" />
            </Tooltip>
        </div>
        <div class="d-flex justify-content-between align-items-center flex-fill">
            <Tooltip Placement="Placement.Right" Title="Tootip">
                <BootstrapInput Value="@RightString" aria-label="@RightString" />
            </Tooltip>
            <Tooltip Placement="Placement.Left" Title="Tootip">
                <BootstrapInput Value="@LeftString" aria-label="@LeftString" />
            </Tooltip>
        </div>
        <div class="d-flex justify-content-center">
            <Tooltip Placement="Placement.Top" Title="Tootip">
                <BootstrapInput Value="@TopString" aria-label="@TopString" />
            </Tooltip>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["P3"]" Introduction="@Localizer["P4"]" Name="Button">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3">
            <Tooltip Placement="Placement.Top" Title="Tootip" Trigger="click">
                <Button Text="@TopString" />
            </Tooltip>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Tooltip Placement="Placement.Left" Title="Tootip" Trigger="click">
                <Button Text="@LeftString" />
            </Tooltip>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Tooltip Placement="Placement.Bottom" Title="Tootip" Trigger="click">
                <Button Text="@BottomString" />
            </Tooltip>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Tooltip Placement="Placement.Right" Title="Tootip" Trigger="click">
                <Button Text="@RightString" />
            </Tooltip>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["P5"]" Introduction="@Localizer["P6"]" Name="BootstrapTooltip">
    <p>@((MarkupString)Localizer["P7"].Value)</p>
    <p>@((MarkupString)Localizer["P8"].Value)</p>
    <Pre>&lt;BootstrapTooltip Title="Test tooltip"&gt;
    &lt;i class="fa-solid fa-flag" /&gt;
&lt;/BootstrapTooltip&gt;</Pre>
    <Tooltip Title="Test tooltip">
        <i class="fa-solid fa-flag" />
    </Tooltip>
</DemoBlock>

<DemoBlock Title="提示信息宿主设置" Introduction="通过设置 <code>Selector</code> 参数精确定位触发提示框元素" Name="Selector">
    <Tooltip Title="@HtmlString" IsHtml="true" Sanitize="false" Selector=".tooltip-selector">
        <div>
            <i class="fa-solid fa-flag" />
            <span class="tooltip-selector ms-2">This is Tooltip</span>
        </div>
    </Tooltip>
</DemoBlock>

<DemoBlock Title="自定义样式" Introduction="通过设置 <code>CustomClass</code> 参数进行自定义样式设置" Name="CustomClass">
    <Tooltip Title="Test tooltip" CustomClass="is-invalid">
        <i class="fa-solid fa-flag" />
    </Tooltip>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
